<template>
	<view class="page bg-questions3">
		
		<view class="flex p-xs mb-sm text-lg nav-capsule">
			<view class="flex-four padding-lr-sm margin-lr-xs margin-bottom-xs radius">
				<view class="cu-bar action padding-xs bg-white setting-action round text-sm">
					<view class="iconfont icon-daojishi margin-lr-xs text-bold" style="width: 80rpx;">{{timer.tag}}</view>
					<button class="cu-btn sm cuIcon-list margin-lr-xs bg-orange" style="width: 160rpx;" @tap="QuestionModel = true">
						选题<text class='cu-tag bg-white xs round margin-left-xs'>{{QIndex + 1}}</text>
					</button>
					<button class="cu-btn sm iconfont icon-chakanjiexi margin-lr-xs bg-black" @tap="onPromptShow" v-if="QList[QIndex].promptShow">解析</button>
					<button class="cu-btn sm iconfont icon-chakanjiexi margin-lr-xs bg-green" @tap="onPromptModel" v-else-if="(decodeNum > 0)">解析</button>
					<button class="cu-btn sm iconfont icon-chakanjiexi margin-lr-xs bg-grey" v-else>解析</button>
					<button class="cu-btn sm iconfont icon-tuichu margin-lr-xs bg-red" @tap="readyQuestion">交卷</button>
				</view>
			</view>
			<view class="flex-sub padding-lr-sm margin-xs radius text-center text-black"></view>
		</view>
		
		<!-- 答题区域 -->
		<view class="">
			<!-- 问题 -->
			<view class="padding margin questions flex align-center justify-center nav-questions">
				<rich-text :nodes="(QList[QIndex].questionDescription) + '(猜一字)' "></rich-text>
			</view>
			
			<!-- 答案 -->
			<view class="margin">
				<view class="answer-win">
					<button class="cu-btn text-xsl text-light text-bold"
						v-for="(item, index) in QList[QIndex].answerOptions" 
						:key="index"
						:data-option="item" 
						:data-qindex="index"
						:class="(item == (QList[QIndex].userAnswer)) ? 'bg-green' : 'bg-yellow' "
						@tap="onAnswer">
						{{item}}
					</button>
				</view>
			</view>
			
			<!--
			<view class="padding-lr-xs padding-bottom-xs text-center">
				<button class="cu-btn round bg-orange text-lg" @tap="nextQuestion" v-if="(QIndex + 1) < QList.length">下一题</button>
				<button class="cu-btn round bg-red text-lg" @tap="readyQuestion" v-else>提交问卷</button>
			</view>
			-->
		</view>
		
		<!-- 选题区域 -->
		<view class="cu-modal drawer-modal justify-start show" @tap="QuestionModel = false" v-if="QuestionModel">
			<view class="cu-dialog basis-lg bg-white">
				<view class="content text-left bg-orange padding-sm text-white">试卷选题</view>
				<view class="cu-list grid col-5 text-left">
					<view class='cu-item margin-xs radius'
						 :class="((item.promptShow) ? 'bg-red' : ((index == QIndex) ? 'bg-orange' : 'bg-gray'))"
						 v-for="(item, index) in QList" :key="index"
						 @tap="selectedQuestion" :data-Qindex="index">
						{{index + 1}}
						<view class="cu-tag badge bg-green" v-if="item.userAnswer">{{item.userAnswer}}</view>
					</view>
				</view>
			</view>
		</view>

		<!-- 解析区域 -->
		<view class="cu-modal bottom-modal show" @tap="PromptModel = false" v-if="PromptModel">
			<view class="cu-dialog" @tap.stop="">
				<view class="cu-bar bg-green text-white ">
					<view class="action text-left">试题解析</view>
					<view class="action text-xs padding-sm text-black"><view class="cu-tag round">剩{{decodeNum}}次</view></view>
				</view>
				<view class="text-left padding">
					答案: {{QList[QIndex].answerOption}}
				</view>
				<view class="text-left padding" style="min-height: 40vh;">
					{{QList[QIndex].answerPrompt}}
				</view>
			</view>
		</view>

		<!-- 提交提示 -->	
		<view class="cu-modal show" @tap="SubmitModel = false" v-if="SubmitModel">
			<view class="cu-dialog">
				<view class="cu-bar bg-white justify-end">
					<view class="content">交卷提示</view>
					<view class="action" @tap="SubmitModel = false">
						<text class="cuIcon-close text-red"></text>
					</view>
				</view>
				<view class="padding-xl bg-white text-left">
					检测到试题尚未全部完成，确认后将不能继续答题，确定是否交卷?
				</view>
				<view class="cu-bar bg-white justify-end">
					<view class="action padding-sm">
						<button class="cu-btn line-green text-green" @tap="SubmitModel = false">取消</button>
						<button class="cu-btn bg-green margin-left" @tap="submitQuestion">确定</button>
					</view>
				</view>
			</view>
		</view>
		
		<model-userlogin :isShow="Http.isLogin"></model-userlogin>
	</view>
</template>

<script>
	var gamemusic = null;
	export default {
		data() {
			return {
				UserInfo: {
					wxUnionid: true,
					userName: "请先登陆",
					shareCode: "R000000",
					usableMoney: "0.00",
					usableRbi: "0.00",
				},
				// 定时器
				timer: {
					obj: null,
					time: 30 * 60,
					tag: "30:00"
				},
				
				// 题目下标
				QIndex: 0,
				QList: [
					{
						questionDescription: '想你三百六十五天',
						answerPrompt: '',
						answerOption: '',
						answerOptions: [
							"它","要","根","据","汉","二"
						]
					}
				],
				
				// 
				responseOption: "",
				decodeNum: 5,
				
				// 试卷选题
				QuestionModel: false,
				PromptModel: false,
				SubmitModel: false
			}
		},
		
		onLoad: function () {
			let _this = this;
			uni.$on("loginModel", (e)=>{
				_this.Http.isLogin = 'CLOSE';
				if('CLOSE' == e) {
					_this.getUserInfo();
				}
			});
			
			_this.loadQuestion();
			_this.gameAudio();
		},
		
		onUnload: function () {
			let _this = this;
			// 背景音频关闭
			gamemusic.destroy();
		},
		 
		methods: {
			// 结束下拉
			onPullDownRefresh() {
				
			},

			onNavigateBack() {
				let _this = this;
				uni.navigateBack({
					delta: 1
				})
			},
			
			// 用户信息
			getUserInfo() {
				let _this = this;
				console.log("加载用户信息");
				
				// 发起请求
				_this.Http.post("my/user/info", {}, function(responseData) {
					console.log("用户信息", responseData);
					_this.UserInfo = responseData.returndata;
				});
			},
			
			// 加载试题
			loadQuestion() {
				let _this = this;
				
				// 获取题库
				_this.Http.post("puzzle/list", {}, function(responseData) {
					_this.QList = responseData.rows;
					_this.timer.time = responseData.total;
					
					// 做倒计时
					_this.timer.obj = setInterval(function() {
						_this.timeDown();
					}, 1000);
				});

			},
			
			// 查看解析
			onPromptShow() {
				let _this = this;
				_this.PromptModel = true;
			},
			
			// 查看解析
			onPromptModel() {
				let _this = this;
				
				if(_this.decodeNum > 0) {
					let Q = _this.QList[_this.QIndex];
					_this.Http.post("puzzle/answer", {puzzleId: Q.id}, function(responseData) {
						let score = responseData.returndata;
						
						// 设置答案
						_this.decodeNum = parseInt(responseData.times);
						_this.QList[_this.QIndex]['answerOption'] = responseData.answer;
						_this.QList[_this.QIndex]['promptShow'] = true;
						
						// 设置弹窗
						_this.PromptModel = true;
					});
				} else {
					wx.showToast({
						title: '提示次数已用完',
						icon: 'loading',
						mask:true,
						duration: 2000
					});
				}
			},
			
			// 选择试题
			selectedQuestion(event) {
				let _this = this;
				let _dataset = event.currentTarget.dataset;
				
				_this.Util.nextAudio();
				_this.QIndex = parseInt(_dataset.qindex);
				
			},
			
			//倒计时
			timeDown: function() {
				let _this = this;
				
				// 倒计时开始
                if (_this.timer.time >= 0) {
                    let minutes = Math.floor(_this.timer.time / 60);
                    let seconds = Math.floor(_this.timer.time % 60);
					
					//更新显示
					_this.timer.tag = (minutes > 9 ? minutes : "0" + minutes) + ":" + (seconds > 9 ? seconds : "0" + seconds);
					
					// 时间递减
					_this.timer.time--;
                } 
				// 倒计时结束
				else {
                    clearInterval(_this.timer.obj);
					_this.submitQuestion();
                }
			},
		
			// 用户答题
			onAnswer(event) {
				let _this = this;
				let _dataset = event.currentTarget.dataset;
				
				_this.responseOption = _dataset.option;
				_this.QList[_this.QIndex]['userAnswer'] = _dataset.option;
				_this.Util.btnAudio();
				
				
				// 自动提交
				if ((_this.QIndex + 1) < _this.QList.length) {
					setTimeout(function () {
						_this.nextQuestion();
					}, 500);
				} else {
				    clearInterval(_this.timer.obj);
					_this.readyQuestion();
				}
				
			},
			
			// 切换试题
			nextQuestion() {
				let _this = this;
				let _qlen = _this.QList.length;
				
				console.log(_this.QIndex, "#", _qlen);
				if((_this.QIndex + 1) < _qlen) {
					_this.QIndex++;
				}
				_this.Util.nextAudio();
			},
			
			// 提交试卷
			readyQuestion() {
				let _this = this;
				for (let i = 0; i < _this.QList.length; i++) {
					let Q = _this.QList[i];
					if(!Q.userAnswer) {
						_this.SubmitModel = true;
						return;
					}
				}
				
				// 直接提交
				_this.submitQuestion();
			},
			
			// 提交试卷
			submitQuestion() {
				let _this = this;
				
				_this.Http.post("puzzle/score", {puzzlelist: JSON.stringify(_this.QList)}, function(responseData) {
					let score = responseData.returndata;
					uni.reLaunch({
						url: '../score?score=' + score
					})
				});
			},
			
			gameAudio: function() {
				gamemusic = uni.createInnerAudioContext();
				gamemusic.autoplay = true;
				gamemusic.loop = true;
				gamemusic.src= "https://zuotiyoujiang.oss-cn-beijing.aliyuncs.com/guess_words/audio/7874.wav";
				gamemusic.play();
			}
			
		},
		
		filters: {

		}
	}
</script>

<style>
	body, page, .page {
		min-height: 100vh;
	}

	.iconfont {
		font-size: 25rpx;
	}

	.nav-capsule {
		padding: 55rpx 0 0 0;
	}
	
	.bg-banner {
		background-image:url('../../static/image/banner.png');
		background-repeat:repeat-x;
		background-position:top center;
	}
	
	.basis-rxl {
		border: 1rpx solid #000000;
	}
	
	.setting-action:first-child {
		margin: 0 20rpx 0 0;
	}

	.questions {
		text-align: left;
		min-height: 46vh;
		font-size: 18px;
	}
	
	rich-text>>>* {
		vertical-align: middle;
		line-height: 60rpx;
	}
	
	rich-text>>>p {
		text-align: center;
		line-height: 60rpx;
	}
	
	.questions>>>* {
		vertical-align: middle;
		line-height: 60rpx;
	}
	
	.answer-win {
		margin: 80rpx 40rpx;
		border-radius: 20rpx;
		min-height: 20vh;
	}

	.answer-win>.cu-btn {
		margin: 7rpx;
		min-height: 160rpx;
	}
	
	.cu-btn.sm {
	    padding: 0 10rpx;
	}
	
	.nav-questions {
		background-image:url("");
		margin: 10px 15px 0 15px;
		border-radius: 10px;
		min-height: 40vh;
		font-size: 25px;
	}
	
	.cu-list.grid>.cu-item {
	    padding: 10px 0 10px;
	}
</style>
